<template>
  <div>
    <div>
      <el-menu   :unique-opened="true"  class="el-menu-vertical-demo" style="float: left" v-bind:style="clientHeight"
               background-color="#FFFFFF"
               text-color="#000000"
               active-text-color="#ffd04b"
               :collapse="isCollapse" @select="handleSelect">
        <template v-for="item in menuList" >
          <el-submenu :index="item.path" v-if="undefined!=item && item.pid == 0 && item.type != 1" >
            <template slot="title">
              <i :class="item.icon" style="margin: auto"></i>
              <span slot="title">{{item.menuName}}</span>
            </template>
            <el-menu-item v-for="(itemChild , index) in item.children" :index="itemChild.path" :key="index" v-if="itemChild.menuName">
              <i :class="itemChild.icon" style="margin-left: 40px"></i>
              <span slot="title"  >{{itemChild.menuName}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.path"  v-else-if="item.type == 1" >
            <i :class="item.icon" ></i>
            <span slot="title"  >{{item.menuName}}</span>
          </el-menu-item>
          <el-menu-item :index="item.path" v-else>
            {{item.menuName}}
          </el-menu-item>
        </template>
      </el-menu>
    </div>


      <div >
        <el-main>
          <div style="margin-top:60px;" v-bind:style="clientWidth">
            <router-view></router-view>
          </div>
        </el-main>
      </div>

  </div>
</template>
<script>

  import SysUser from '../views/sys/sys-user/SysUser'
    export default {

      mounted(){
        this._getUserMenu();
        this. _getHeight();
        this. _getWidth();
      },

      components:{
        SysUser
      },

      name: "HBody",
      props:{
        isCollapse:false
      },
      data(){
          return {
            menuList:[],
            icon:'el-icon-message',
            clientHeight:'height 800px',
            clientWidth:'height 1200px',
          }

      },

      methods:{
        handleSelect(key, keyPath){
          if (keyPath[1]===undefined){
            this.$router.push({ name: key });
          }else{
            this.$router.push({ name: keyPath[1] });
          }

         console.log("------------this.$router-----------------",this.$router)

        },
        _getHeight(){
           this.clientHeight='height: '+   (document.documentElement.clientHeight-90)+'px;';
        },
        _getWidth(){
          this.clientWidth='width: '+   (document.documentElement.clientWidth-290)+'px;';
        },
        _getUserMenu(){
          this.$http.get('/api/base/sys_resource/list_menu').then(res=>{
            let returnData=res.data;
            if (undefined === returnData || '' ===returnData || '未登录' ===returnData){
              this.$router.push({path:'/login',query:{}});
            }else{
              if (undefined != returnData.status&& returnData.status == 500){
                this.$router.push({path:'/login',query:{}});
              }else{
                this.menuList=returnData.data;
              }
            }
          }).catch(err=>{
            this.$router.push({path:'/login',query:{}});
            console.log(err)
          })
        }
      }
    }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 218px;
    border-right: none;
    min-height: 400px;
  }
</style>
